<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米商城-详情页</title>
    <link
      rel="shortcut icon"
      href="../images/favicon.ico"
      type="image/x-icon"
    />
    <!-- 引入icon图标 -->
    <link rel="stylesheet" href="../lib/yidongduan/iconfont.css" />
    <link
      rel="stylesheet"
      href="../lib/swiper-5.4.5/package/css/swiper.min.css"
    />
    <link rel="stylesheet" href="../css/reset.css" />
    <link rel="stylesheet" href="../css/header.css" />
    <link rel="stylesheet" href="../css/footer.css" />
    <link rel="stylesheet" href="../css/fix_the_right_side.css" />
    <link rel="stylesheet" href="../css/detail-page.css" />
  </head>
  <body>
    <div class="header"></div>
    <!-- 标题栏 -->
    <div>
      <div class="xm-product-box">
        <div class="nav-bar">
          <div class="container">
            <h2 class="product-name"></h2>

            <div class="con">
              <div class="left">
                <span class="separator">|</span>
                <a href="" stat_exposure="true">小米10 至尊纪念版</a>
                <span class="separator">|</span>
                <a href="" stat_exposure="true">小米10 青春版5G</a>
              </div>
              <div class="right">
                <a href="" target="" stat_exposure="true">概述</a>
                <span class="separator">|</span>
                <a href="" target="_blank" stat_exposure="true">F码通道</a>
                <span class="separator">|</span>
                <a href="" class="J_contactBtn" stat_exposure="true"
                  >咨询客服</a
                >
                <span class="separator">|</span>
                <a class="J_nav_comment" href="">用户评价</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="xm-product-box nav-bar-hidden J_nav_hidee">
        <div class="nav-bar">
          <div class="container">
            <h2 class="product-name"></h2>

            <div class="left">
              <span class="separator">|</span>
              <a href="" stat_exposure="true">小米10 至尊纪念版</a>
              <span class="separator">|</span>
              <a href="" stat_exposure="true">小米10 青春版5G</a>
            </div>
            <div class="right">
              <a href="" target="" stat_exposure="true">概述</a>
              <span class="separator">|</span>
              <a href="" target="_blank" stat_exposure="true">F码通道</a>
              <span class="separator">|</span>
              <a href="" class="J_contactBtn" stat_exposure="true">咨询客服</a>
              <span class="separator">|</span>
              <a class="J_nav_comment" href="">用户评价</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 页面信息 -->
    <div class="mi-detail">
      <div class="page">
        <div class="page-box">
          <div class="page-info">
            <!-- 未登陆提示信息 -->
            <div class="login-notic">
              <div class="container">
                为方便您购买，请提前登陆
                <a href="../html/log-in.html" class="login">立即登录</a>
                <a class="iconfont icon-delete1"></a>
              </div>
            </div>
            <!--页面信息上半部分 -->
            <div class="product-box container">
              <!-- 页面上部左边轮播图 -->
              <div class="img-left">
                <div class="product-imglist">
                  <div class="imgbox">
                    <div class="swiper-container">
                      <div class="swiper-wrapper" id="imgbox-swiper">
                        <!-- <div class="swiper-slide">
                          <img
                            src="../images/detail-page/pms_1581494045.31058391.jpg"
                            alt=""
                          />
                        </div>
                        <div class="swiper-slide">
                          <img
                            src="../images/detail-page/pms_1581494052.12221865.jpg"
                            alt=""
                          />
                        </div>
                        <div class="swiper-slide">
                          <img
                            src="../images/detail-page/pms_1581494060.7822643.jpg"
                            alt=""
                          />
                        </div>
                        <div class="swiper-slide">
                          <img
                            src="../images/detail-page/pms_1581494068.13077664.jpg"
                            alt=""
                          />
                        </div>
                        <div class="swiper-slide">
                          <img
                            src="../images/detail-page/pms_1581494070.59196940.jpg"
                            alt=""
                          />
                        </div> -->
                      </div>
                      <script type="text/html" id="imgboxSwiper">
                        {{each imgs item}}
                        <div class="swiper-slide">
                          <img src="{{item}}" alt="" />
                        </div>
                        {{/each}}
                      </script>
                      <!-- 如果需要分页器 -->
                      <div class="swiper-pagination"></div>

                      <!-- 如果需要导航按钮 -->
                      <div class="swiper-button-prev"></div>
                      <div class="swiper-button-next"></div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 页面上部详细信息 -->
              <div class="product-con">
                <!-- 项目类名 -->
                <h2 class="product-name"></h2>
                <!-- 描述信息 -->
                <p class="sale-desc" id="desc"></p>
                <p class="company-info">小米自营</p>
                <!-- 价格信息 -->
                <div class="price-info">
                  <span>3799 元<del>3999 元</del></span>
                </div>
                <!-- 分割线 -->
                <div class="line"></div>
                <!-- 地址栏 -->
                <div class="address-box">
                  <div class="product-address">
                    <i class="iconfont icon-zuobiao"></i>
                    <div class="address-con">
                      <div>
                        <div class="address-info">
                          <span>北京</span><span>北京市</span><span>海淀区</span
                          ><span>清河街道</span>
                        </div>
                        <a href="" class="edit">修改</a>
                      </div>
                      <div class="info">
                        <div class="desc">
                          <span>该地区暂时缺货</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 购买选择 -->
                <div class="buy-option">
                  <!-- 版本 -->
                  <div class="buy-box-child">
                    <div class="option-box">
                      <div class="title">选择版本</div>
                      <ul class="clearfix" id="selectVersions">
                        <!-- <li class="active">
                          <a stat_exposure="true">8GB+128GB</a>
                        </li>
                        <li class="">
                          <a stat_exposure="true">8GB+256GB</a>
                        </li>
                        <li class="">
                          <a stat_exposure="true">12GB+256GB</a>
                        </li> -->
                      </ul>
                      <script type="text/html" id="versions">
                        {{each name}}
                        <li class="">
                          <a stat_exposure="true">{{name}}<a>
                        </li>
                        {{/each}}
                      </script>
                    </div>
                  </div>
                  <!-- 颜色 -->
                  <div class="buy-box-child">
                    <div class="option-box">
                      <div class="title">选择颜色</div>
                      <ul class="clearfix" id="selectColor">
                        <!-- <li class="">
                          <a stat_exposure="true">国风雅灰</a>
                        </li>
                        <li class="active">
                          <a stat_exposure="true">钛银黑</a>
                        </li>
                        <li class="">
                          <a stat_exposure="true">冰海蓝</a>
                        </li>
                        <li class="">
                          <a stat_exposure="true">蜜桃金</a>
                        </li> -->
                      </ul>
                      <script type="text/html" id="color">
                        {{each name}}
                        <li class="">
                          <a stat_exposure="true">{{name}}<a>
                        </li>
                        {{/each}}
                      </script>
                    </div>
                  </div>
                </div>
                <!-- 结算 -->
                <div class="selected-list">
                  <ul class="selectedList ">
                   
                  </ul>
                  <ul></ul>
                  <ul></ul>
                  <ul></ul>
                  <div class="total-price">总计：3799元</div>
                </div>
                <div class="btn-box">
                  <div class="sale-btn">
                    <a class="btn btn-line-primary">立即购买</a>
                  </div>
                  <div class="favorite-btn">
                    <a class="btn-gray btn-like">
                      <i class="iconfont default">&#xe608;</i>
                      喜欢
                    </a>
                  </div>
                </div>
                <div class="after-sale-info">
                  <span
                    ><a href=" " class="support" stat_exposure="true"
                      ><i class="iconfont">&#xeb0b;</i><em>小米自营</em></a
                    ></span
                  ><span
                    ><a
                      href=" "
                      title="由小米发货"
                      class="support"
                      stat_exposure="true"
                      ><i class="iconfont">&#xeb0b;</i><em>小米发货</em></a
                    ></span
                  ><span
                    ><a href=" " class="support" stat_exposure="true"
                      ><i class="iconfont">&#xeb0b;</i><em>7天无理由退货</em></a
                    ></span
                  ><span
                    ><a href=" " class="support" stat_exposure="true"
                      ><i class="iconfont">&#xeb0b;</i><em>运费说明</em></a
                    ></span
                  ><span
                    ><a href=" " class="support" stat_exposure="true"
                      ><i class="iconfont">&#xeb0b;</i><em>企业信息</em></a
                    ></span
                  ><span
                    ><a
                      href=""
                      target="_blank"
                      class="support"
                      stat_exposure="true"
                      ><i class="iconfont">&#xeb0b;</i><em>售后服务政策</em></a
                    ></span
                  ><span
                    ><a
                      href=""
                      target="_blank"
                      class="support"
                      stat_exposure="true"
                      ><i class="iconfont">&#xeb0b;</i><em>7天价格保护</em></a
                    ></span
                  >
                </div>
              </div>
            </div>
            <!-- 页面信息下半部分 -->
            <div class="product-detail page-main">
              <div class="detail-banner">
                <div class="container">
                  <ul>
                    <li class="active">
                      <a stat_exposure="true">商品概述</a>
                    </li>
                    <li class="">
                      <a stat_exposure="true">商品参数</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="detail-box">
                <div class="detail-item">
                  <!-- 信息图片 -->
                  <div class="section">
                    <div class="section-plain_view">
                      <div class="img-box" style="height: 974px">
                        <img
                          src="../images/detail-page/detail（1）.jpg"
                          lazy="loaded"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="section">
                    <div class="section-plain_view">
                      <div class="img-box" style="height: 1220px">
                        <img
                          src="../images/detail-page/detail（2）.jpg"
                          lazy="loaded"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="section">
                    <div class="section-plain_view">
                      <div class="img-box" style="height: 1049px">
                        <img
                          src="../images/detail-page/detail（3）.jpg"
                          lazy="loaded"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="section">
                    <div class="section-plain_view">
                      <div class="img-box" style="height: 1163px">
                        <img
                          src="../images/detail-page/detail（4）.jpg"
                          lazy="loaded"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="section">
                    <div class="section-plain_view">
                      <div class="img-box" style="height: 850px">
                        <img
                          src="../images/detail-page/detail（5）.jpg"
                          lazy="loaded"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="section">
                    <div class="section-plain_view">
                      <div class="img-box" style="height: 585px">
                        <img
                          src="../images/detail-page/detail（6）.jpg"
                          lazy="loaded"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="section">
                    <div class="section-plain_view">
                      <div class="img-box" style="height: 1440px">
                        <img
                          src="../images/detail-page/detail（7）.jpg"
                          lazy="loaded"
                        />
                      </div>
                    </div>
                  </div>

                  <!-- 官方微信 -->
                  <div class="section">
                    <div class="section-plain_view">
                      <div class="title container">
                        <h3>官方微信</h3>
                      </div>
                      <div class="img-box" style="height: 160px">
                        <img
                          src="../images/detail-page/detail（wx）.jpg"
                          lazy="loaded"
                        />
                      </div>
                    </div>
                  </div>
                  <!-- 价格说明 -->
                  <div class="section">
                    <div class="section-plain_view">
                      <div class="title container">
                        <h3>价格说明</h3>
                      </div>
                      <div class="img-box" style="height: 189px">
                        <img
                          src="../images/detail-page/detail（jgsm）.jpeg"
                          lazy="loaded"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer"></div>
    <div class="fix_the_right_side"></div>
    <script src="../lib/swiper-5.4.5/package/js/swiper.min.js"></script>
    <script
      src="../lib/requirejs/require.min.js"
      data-main="../js/detail-page"
    ></script>
    <script>
      var mySwiper = new Swiper(".product-box .swiper-container", {
        direction: "horizontal", // 水平切换选项
        loop: true, // 循环模式选项
        autoplay: true, //自动切换
        // 如果需要分页器
        pagination: {
          el: ".product-box .swiper-pagination",
          clickable: true,
          clickableClass: "my-pagination-clickable",
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".product-box .swiper-button-next",
          prevEl: ".product-box .swiper-button-prev",
        },
      });
    </script>
  </body>
</html>
